<template>
  <div class="camera-list">
    <div class="camera-item" v-for="item in cameraList" :key="item.cameraId">
      <a-image width="100%" :src="`${aiFileUrl}${item[cameraIndex[item[0].cameraId]].imagesUrl}`" />
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { api } from '/@/api/plat/event-result.js';
  const cameraList = ref([]);
  const cameraIndex = ref({});
  const aiFileUrl = import.meta.env.VITE_APP_AIFILE;

  function getImages(row) {
    api.queryList({ targetId: row.targetId, startTime: row.startTime, endTime: row.endTime }).then(({ data }) => {
      // 按摄像头分组
      let obj = {};
      for (let item of data) {
        if (!obj[item.cameraId]) {
          obj[item.cameraId] = [item];
          cameraIndex.value[item.cameraId] = 0;
        }
        obj[item.cameraId].push(item);
      }
      let list = [];
      for (let key in obj) {
        list.push(obj[key]);
      }
      cameraList.value = list;
    });
  }

  function playCamera(time) {
    for (let item of cameraList.value) {
      const cameraId = item[0].cameraId;
      for (let index = 0; index < item.length; ++index) {
        if (+new Date(item[index].resultTime) > +new Date(time)) {
          const currentIndex = index - 1;
          cameraIndex.value[cameraId] = currentIndex < 0 ? 0 : currentIndex;
          break;
        }
      }
    }
  }

  defineExpose({ getImages, playCamera });
</script>

<style scoped lang="less">
  .camera-list {
    width: 400px;
    height: calc(100% - 30px);
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    .camera-item {
      border: 1px solid #ddd;
      width: 100%;
      aspect-ratio: 16 / 9;
      margin-bottom: 20px;
      background-color: #3336;
    }
  }
</style>
